import React from 'react';
import ReactEcharts from '@/components/Echarts';
// import styles from '@/pages/Organization/Hr/index.less';
import colors from '@/theme';

const getLegend = data => {
    const arr = [];
    data.forEach(item => {
        arr.push(item.name);
    });
    return arr;
};
const getOption = data => ({
    color: colors,
    tooltip: {
        trigger: 'item',
        formatter(params) {
            const html = `<div><i style="display: inline-block;vertical-align: middle;width:8px;height:8px;border-radius: 100%;margin-right:6px;background:${params.color};"></i><span style="color:#aaa">${params.name}：</span><span>${params.percent}%</span></div>`;
            return html;
        }
    },
    legend: {
        data: getLegend(data)
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data
        }
    ]
});

const Xlfb = ({ data }) => <ReactEcharts option={getOption(data)} />;

export default Xlfb;
